import defaultGif from '@/assets/default.gif'
import eventBus from '@/eventBus'
import { debounce } from '@/utils'

let imgs = []
function setImage(img) {
  img.dom.src = defaultGif
  const clientHeight = document.documentElement.clientHeight
  const rect = img.dom.getBoundingClientRect()
  const height = rect.height || 150
  if (rect.top >= -height && rect.top <= clientHeight) {
    img.dom.src = img.src
    imgs = imgs.filter((v) => v !== img)
  }
}

function setImages() {
  for (const img of imgs) {
    setImage(img)
  }
}

function handleScroll() {
  setImages()
}

eventBus.$on('mainScroll', debounce(handleScroll, 50))

export default {
  inserted(el, bindings) {
    const img = {
      dom: el,
      src: bindings.value,
    }
    imgs.push(img)
    setImage(img)
  },
  unbind(el) {
    imgs = imgs.filter((v) => v.dom !== el)
  },
}
